<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
  	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="">
	<meta name="author" content="">
	<link rel="icon" href="./resources/login.ico">
	<title>定时任务</title>
	<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<link href="./bootstrap/css/login.css" rel="stylesheet">
    <script src="./react/react.js"></script>
    <script src="./react/react-dom.js"></script>
    <script src="./react/browser.min.js"></script>
    <script src="./jquery/jquery.min.js"></script>
  </head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <body>
    <div id="example"></div>
  </body>
   <%--  <script type="text/babel" src="${pageContext.request.contextPath}/WEB-INF/jsp/schedule.js"></script> --%>  
    <script type="text/babel">
    var MyForm = React.createClass({
        getInitialState: function() {
          return {
    		jobName : "",
            email: "",
            description: "",
            city: "hz",
            male: true,
    		jobNameError : "", 
            emailError: "",
            introError: ""
          };
        },
    	handleJobName : function(e){
    	  var value = e.target.value;
          this.setState({
            jobName: value,
          });
    	},
    	handleJobGroup : function(e){
    	  var value = e.target.value;
          this.setState({
            jobGroup: value,
          });
    	},

    	handleCronExpression : function(e){
    	  var value = e.target.value;
          this.setState({
            cronExpression: value,
          });
    	},

        handleEmail: function(e) {
          var value = e.target.value;
          var error = '';
          if(!(/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(value))) {
            error = '请输入正确的Email地址';
          }
          this.setState({
            email: value,
            emailError: error
          });
        },

        handleDescription: function(e) {
          var value = e.target.value;
          var error = "";
          if(value.length < 10) {
            error = "介绍不能少于十个字";
          }
          this.setState({
            description: value,
            descriptionError: error
          });
        },

        handleCity: function(e) {
          var value = e.target.value;
          this.setState({
            city: value,
          });
        },
        handleGender: function(e) {
          var male = !!(e.target.value == 'MALE');
          this.setState({
            male: male
          });
        },
    	handleAdd : function(e) {
    		e.preventDefault();
    		var formData = {
    			jobName : this.refs['jobName'].value,
    			jobGroup : this.refs['jobGroup'].value,
    			cronExpression : this.refs['cronExpression'].value,
    			description : this.refs['description'].value,
    			email : this.refs['email'].value,
    			city : this.refs['city'].value,
    			gender : this.refs['gender'].value
    		};
    		console.log("Data:"+formData);
    		$.ajax({
    			url : '/addJob',
    			type : 'POST',
    			dataType : 'json',
    			data : formData,
    			scriptCharset : 'utf-8',
    			success : function(result){
    				alert(result);
    			}
    		});
    	},
    	handleEdit : function(e) {
    		e.preventDefault();
    		var formData = {
    			jobName : this.refs['jobName'].value,
    			jobGroup : this.refs['jobGroup'].value,
    			cronExpression : this.refs['cronExpression'].value,
    			description : this.refs['description'].value,
    			email : this.refs['email'].value
    		};
    		console.log("Data:"+formData);
    		$.ajax({
    			url : '/Spring-Redis/redis/editJob',
    			type : 'POST',
    			dataType : 'json',
    			data : formData,
    			scriptCharset : 'utf-8',
    			success : function(result){
    				alert(result);
    			}
    		});
    	},
    	handlePause : function(e) {
    		e.preventDefault();
    		var formData = {
    			jobName : this.refs['jobName'].value,
    			jobGroup : this.refs['jobGroup'].value,
    			cronExpression : this.refs['cronExpression'].value,
    			description : this.refs['description'].value,
    			email : this.refs['email'].value
    		};
    		console.log("Data:"+formData);
    		$.ajax({
    			url : '/pauseJob',
    			type : 'POST',
    			dataType : 'json',
    			data : formData,
    			scriptCharset : 'utf-8',
    			success : function(result){
    				alert(result);
    			}
    		});
    	},
    	handleDelete : function(e) {
    		e.preventDefault();
    		var formData = {
    			jobName : this.refs['jobName'].value,
    			jobGroup : this.refs['jobGroup'].value,
    			cronExpression : this.refs['cronExpression'].value,
    			description : this.refs['description'].value,
    			email : this.refs['email'].value
    		};
    		console.log("Data:"+formData);
    		$.ajax({
    			url : '/deleteJob',
    			type : 'POST',
    			dataType : 'json',
    			data : formData,
    			scriptCharset : 'utf-8',
    			success : function(result){
    				alert(result);
    			}
    		});
    	},

    	handleResume : function(e){
    		e.preventDefault();
    		var formData = {
    			jobName : this.refs['jobName'].value,
    			jobGroup : this.refs['jobGroup'].value,
    			cronExpression : this.refs['cronExpression'].value,
    			description : this.refs['description'].value,
    			email : this.refs['email'].value
    		};
    		console.log("Data:"+formData);
    		$.ajax({
    			url : '/Spring-Redis/redis/resumeJob',
    			type : 'POST',
    			dataType : 'json',
    			data : formData,
    			scriptCharset : 'utf-8',
    			success : function(result){
    				alert(result);
    			}
    		});
    	},
    	
    	handleGetAll : function(e){
    		$.ajax({
    			url : '/getAllJob',
    			type : 'POST',
    			dataType : 'json',
    			data : '',
    			scriptCharset : 'utf-8',
    			success : function(result){
    				alert(result);
    			}
    		});
    	},
    	
    	handleShut : function(e) {
    		e.preventDefault();
    		var formData = {
    			jobName : this.refs['jobName'].value,
    			jobGroup : this.refs['jobGroup'].value,
    			cronExpression : this.refs['cronExpression'].value,
    			description : this.refs['description'].value,
    			email : this.refs['email'].value
    		};
    		console.log("Data:"+formData);
    		$.ajax({
    			url : '/shutJob',
    			type : 'POST',
    			dataType : 'json',
    			data : formData,
    			scriptCharset : 'utf-8',
    			success : function(result){
    				alert(result);
    			}
    		});
    	},

    	handleQueryPath : function(e){
    		$.ajax({
    			url : '/queryRootPath',
    			type : 'POST',
    			dataType : 'json',
    			data : '',
    			scriptCharset : 'utf-8',
    			success : function(result){
    				this.rootpath = result;
    				alert(result+" : "+this.rootpath);
    			}
    		});
    	},  	

        render: function() {
		    var topStyle = {
        		top : '2%',
				bottom : '1%'
     		}; 
          return (
			<form className="form-horizontal">
			<div className="form-group">
			<div className="col-sm-offset-4 col-sm-4 col-sm-offset-4">
            	<h2 class="form-signin-heading">定时任务</h2>
			</div>
			</div>
            <div className="form-group">
              <label for='jobName' className="col-sm-4 control-label">任务名称</label>
			  <div className="col-sm-4">
              	<input className="form-control" ref="jobName" type='text' name = 'jobName' value={this.state.jobName} onChange={this.handleJobName} />
			  </div>
			  <div className="col-sm-4">
			  	<span>{this.state.jobNameError}</span>
		      </div>
			</div>
		   <div className="form-group">
              <label for='jobGroup' className="col-sm-4 control-label">任务群组</label>
             <div className="col-sm-4">
			 <input className="form-control" ref="jobGroup" type='text' name = 'jobGroup' value={this.state.jobGroup} onChange={this.handleJobGroup} />
             </div>
			 <span className="col-sm-4">{this.state.jobGroupError}</span>
		   </div>
			<div className="form-group">
              <label htmlFor='cronExpression' className="col-sm-4 control-label">执行时间</label>
              <div className="col-sm-4">
				<input className="form-control" ref="cronExpression" type='text' name = 'cronExpression' value={this.state.cronExpression} onChange={this.handleCronExpression} />
              </div>
				<span className="col-sm-4">{this.state.cronExpressionError}</span>
			</div>
			<div className="form-group">
              <label htmlFor='email' className="col-sm-4 control-label">邮箱地址</label>
              <div className="col-sm-4">
			  <input className="form-control" ref="email" type='text' name='email' id='email' value={this.state.email} onChange={this.handleEmail} />
              </div>
			  <span>{this.state.emailError}</span>
            </div>
			<div className="form-group"> 
			 <label htmlFor='description' className="col-sm-4 control-label">任务描述</label>
             <div className="col-sm-4"> 
		     <textarea className="form-control" ref="description" name = 'description' type='text' value={this.state.description} onChange={this.handleDescription} />
             </div>
			<span>{this.state.descriptionError}</span>
            </div>
			<div className="form-group"> 
			 <label htmlFor='city' className="col-sm-4 control-label">所在城市:</label>
              <div className="col-sm-4">
				<select className="form-control" ref="city" name='city' id='city' value={this.state.city} onChange={this.handleCity}>
                <option value='bj'>北京</option>
                <option value='sh'>上海</option>
                <option value='xa'>西安</option>
              </select>
			  </div>
			</div>
			<div className="form-group">
              <label className="col-sm-4 control-label">性别:</label>
		      <div className="col-sm-4">
              <div className="form-control">
			  	<div className="col-xs-9 col-sm-9">
					<input ref="gender" type='radio' name='gender' checked={this.state.male} onChange={this.handleGender} value='MALE' />男
              	</div>
				<div className="col-xs-3 col-sm-3">
					<input ref="gender" type='radio' name='gender' checked={!this.state.male} onChange={this.handleGender} value='FEMALE'/>女
  			    </div>
			   </div>
			  </div>	
			</div>
			  <div className="form-group">
    			<div className="col-xs-6 col-sm-offset-3 col-sm-1" style={topStyle}>
    				<input className="btn btn-lg btn-primary btn-block" type='button' name='submit' onClick={this.handleAdd} value='添加'></input>
    			</div>
				<div className="col-xs-6 col-sm-1" style={topStyle}>
			    	<input className="btn btn-lg btn-primary btn-block" type='button' name='submit' onClick={this.handleEdit} value='编辑'></input>
    			</div>
				<div className="col-xs-6 col-sm-1" style={topStyle}>
					<input className="btn btn-lg btn-primary btn-block" type='button' name='submit' onClick={this.handlePause} value='暂停'></input>
    			</div>
				<div className="col-xs-6 col-sm-1" style={topStyle}>
					<input className="btn btn-lg btn-primary btn-block" type='button' name='submit' onClick={this.handleResume} value='恢复'></input>
    			</div>
				<div className="col-xs-6 col-sm-1" style={topStyle}>
					<input className="btn btn-lg btn-primary btn-block" type='button' name='submit' onClick={this.handleDelete} value='删除'></input>
    			</div>
				<div className="col-xs-6 col-sm-1" style={topStyle}>
					<input className="btn btn-lg btn-primary btn-block" type='button' name='submit' onClick={this.handleGetAll} value='查看'></input>
    			</div>
				<div className="col-xs-6 col-sm-1" style={topStyle}>
					<input className="btn btn-lg btn-primary btn-block" type='button' name='submit' onClick={this.handleShut} value='停止'></input>
				</div>
			  </div>
			</form>
            )
        }
      });

      ReactDOM.render(
        	<MyForm />,
        	document.getElementById("example")
        );
    </script>
</html>
